<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>玩转spring boot——结合JPA</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    var app = angular.module('app', []);
    app.controller('MainController', function($rootScope, $scope, $http) {

        $scope.data = {};
        $scope.rows = [];

        //添加
        $scope.add = function() {
            $scope.data = {
                no : 'No.1234567890',
                quantity : 100,
                'date' : '2016-12-30'
            };
        }

        //编辑
        $scope.edit = function(id) {
            for ( var i in $scope.rows) {
                var row = $scope.rows[i];
                if (id == row.id) {
                    $scope.data = row;
                    return;
                }
            }
        }

        //移除
        $scope.remove = function(id) {
            for ( var i in $scope.rows) {
                var row = $scope.rows[i];
                if (id == row.id) {
                    $scope.rows.splice(i, 1);
                    return;
                }
            }
        }

        //保存
        $scope.save = function() {
            $http({
                url : '/save',
                method : 'POST',
                data : $scope.data
            }).success(function(r) {
                //保存成功后更新数据
                $scope.get(r.id);
            });
        }

        //删除
        $scope.del = function(id) {
            $http({
                url : '/delete?id=' + id,
                method : 'POST',
            }).success(function(r) {
                //删除成功后移除数据
                $scope.remove(r.id);
            });
        }

        //获取数据
        $scope.get = function(id) {
            $http({
                url : '/get?id=' + id,
                method : 'POST',
            }).success(function(data) {
                for ( var i in $scope.rows) {
                    var row = $scope.rows[i];
                    if (data.id == row.id) {
                        row.no = data.no;
                        row.date = data.date;
                        row.quantity = data.quantity;
                        return;
                    }
                }
                $scope.rows.push(data);
            });
        }

        //初始化载入数据
        $http({
            url : '/findAll',
            method : 'POST'
        }).success(function(rows) {
            for ( var i in rows) {
                var row = rows[i];
                $scope.rows.push(row);
            }
        });
    });
    /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
    <h1>玩转spring boot——结合JPA</h1>
    <h4>
        <a href="http://www.cnblogs.com/GoodHelper/">from 刘冬的博客</a>
    </h4>
    <input type="button" value="添加" ng-click="add()" />
    <input type="button" value="保存" ng-click="save()" />
    <br />
    <br />
    <h3>清单信息：</h3>
    <input id="id" type="hidden" ng-model="data.id" />
    <table cellspacing="1" style="background-color: #a0c6e5">
        <tr>
            <td>编号：</td>
            <td><input id="no" ng-model="data.no" /></td>
            <td>日期：</td>
            <td><input id="date" ng-model="data.date" /></td>
            <td>数量：</td>
            <td><input id="quantity" ng-model="data.quantity" /></td>
        </tr>
    </table>

    <br />
    <h3>清单列表：</h3>
    <table cellspacing="1" style="background-color: #a0c6e5">
        <tr
            style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
            <td>操作</td>
            <td>编号</td>
            <td>日期</td>
            <td>数量</td>
        </tr>
        <tr ng-repeat="row in rows" bgcolor='#F4FAFF'>
            <td><input ng-click="edit(row.id)" value="编辑" type="button" /><input
                ng-click="del(row.id)" value="删除" type="button" /></td>
            <td>{{row.no}}</td>
            <td>{{row.date}}</td>
            <td>{{row.quantity}}</td>
        </tr>
    </table>

    <br />
  
</body>
</html>
